<template>
	<view class="page-container detail-container">
		<uni-nav-bar dark :fixed="true" status-bar left-icon="left" :border="false" title="报名详情" @clickLeft="goBack" />
		<!-- <view class="bg_arc_detail"></view> -->
		<view class="content-wrap">
			<view class="info-box">
				<view class="title">课程信息 </view>
				<view>
					<view class="text-desc">
						<text class="titleName">课程名称：</text>
						<text class="desc">{{ info.courseTitle }}</text>
					</view>
					<view class="text-desc">
						<text class="titleName">课程分类：</text>
						<text class="desc">{{ info.classification ? info.classification: '暂无'}}</text>
					</view>
					<view class="text-desc">
						<text class="titleName">培训时间：</text>
						<text class="desc">{{ info.time ? info.time: '暂无'}}</text>
					</view>
					<view class="text-desc">
						<text class="titleName">培训费用：</text>
						<text class="desc">{{ info.cost ? info.cost: '暂无'}}</text>
					</view>
					<view class="text-desc">
						<text class="titleName">课程简介：</text>
						<view class="desc" v-html='info.briefIntroduction'></view>
					</view>
					<view v-if='info.status === -1' class="mt-3-1 d-flex justify-content-between">
						<text class="titleName">拒绝取消的原因：</text>
						<text class="desc">{{ info.remark ? info.remark: '暂无'}}</text>
					</view>
				</view>
			</view>
			
			<!-- 课程详情 -->
			<!-- <view class="info-box p-3 mt-2">
				<text class="d-block fs_15 box-title pb-3-1 title">课程详情</text>
				<view class="mt-3-1">
					<text>{{ info.jobDescription }}</text>
				</view>
			</view> -->
			
			<!-- 缴费合同信息 -->
			<view class="info-box mt-2" v-if='info.status === 2 || info.status === 3'>
				<view class="w-100">
					<view class="title">缴费合同信息 </view>
					<view class="text-desc">
						<text class="titleName">缴费金额：</text>
						<text class="desc">{{ info.cost }}</text>
					</view>
					<view class="text-desc">
						<text class="titleName">合同编号：</text>
						<text class="desc">{{ info.contractNO ? info.contractNO: '暂无'}}</text>
					</view>
					<view class="text-desc">
						<text class="titleName">合同开始日期：</text>
						<text class="desc">{{ info.trainStart ? formatData(info.trainStart) : "暂无"}}</text>
					</view>
					<view class="text-desc">
						<text class="titleName">合同结束日期：</text>
						<text class="desc">{{ info.trainEnd ? formatData(info.trainEnd) : "暂无"}}</text>
					</view>
				</view>
			</view>
			<!-- 结业信息 -->
			<view class="info-box mt-2" v-if='info.status === 3'>
				<view class="w-100">
					<text class="title">结业信息 </text>
					<view class="text-desc">
						<text class="titleName">结业日期：</text>
						<text class="desc">{{ info.finishStudyTime ? formatData(Number(info.finishStudyTime)) : "暂无"}}</text>
					</view>
					<view class="text-desc">
						<text class="titleName">结业证书：</text>
						<view class="desc">
							<image 
								v-if='info.courseCompletionCertificate' 
								:src='info.courseCompletionCertificate'
								class='picture'
							></image>
							<span v-else>暂无</span>
						</view>
					</view>
					<view class="text-desc">
						<text class="titleName">结业备注：</text>
						<text class="desc">{{ info.remark ? info.remark: '暂无'}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 返回首页 -->
		<back-home></back-home>
	</view>
</template>

<script>
	let App = getApp();
	import backHome from "@/components/back-home/back-home.vue"
	export default {
		components:{
			backHome
		},
		data() {
			return {
				info:{},
				// 流程
				processContent:"",
				// 报名人员
				// 订阅的模板id
				templateId:"",
				isWeChat:App.globalData.isWeChat,
				companyData: '',
				status: '' // 单据状态
			}
		},
		
		onLoad:function(option){
			// option 接受url的传参 
			this.id = option.id;
			this.status = option.status;
		},
		
		onShow:function(){
			this.initDetail(this.id);
		},
	
		// 小程序转发分享给朋友
		onShareAppMessage(option){
			if (option.from === 'button') { // 来自页面内分享按钮
				console.log(option.target)
			}
			return {
				title: this.info.title,
				path: '/pages/job/jobDetail?sn='+ this.info.sn + '&signcode=' + App.globalData.signcode,
				desc: this.info.brief,
			}
		},
		
		// 小程序转发分享到朋友圈
		onShareTimeline(){
			
		},
	
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			
			// 获取报名详情
			initDetail(id){
				this.$api.signUpDetail(id).then(res=>{
					if(res.code === 200){
						// 招聘详情
						this.info = res.data;
						// this.info.trainStart = this.formatData(this.info.trainStart);
						// this.info.trainEnd = this.formatData(this.info.trainEnd);
						// console.log('trainStart', this.info.trainStart);
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			// 获取公司详情
			getCompanyData(id) {
				this.$api.companyDetail(id).then(res=>{
					if(res.code === 200) {
						this.companyData = res.data;
					}
				})
			},
			// 取消报名
			cancelEnroll(){
				uni.showModal({
					title: '温馨提示',
					content: '请确认是否取消报名',
					confirmText: '确定',
					cancelText: '取消',
					success: (modal_res) => {
						if (modal_res.confirm) {
							// 调用取消报名的接口
							this.$api.cancelSignUp({
								token:uni.getStorageSync('user_token'),
								id:this.id,
							}).then(res=>{
								uni.showToast({
									title: res.msg,
									icon: 'success'
								});
								this.initDetail(this.id);
							});
						} else if (modal_res.cancel) {
							console.log('关闭');
						}
					}
				});
			},
			// 时间戳转换
			formatData(value) {
				var date = new Date(value);	
				//date.setTime(value);
				var month = date.getMonth() + 1;
				var hours = date.getHours();
				if (hours < 10) hours = "0" + hours;
				var minutes = date.getMinutes();
				if (minutes < 10) minutes = "0" + minutes;
				// var time = date.getFullYear() + "-" + month + "-" + date.getDate() +" " + hours + ":" + minutes;
				var time = date.getFullYear() + "-" + month + "-" + date.getDate();
				return time;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.right{
		text-align: right;
	}
	.content-wrap{
		padding: 0 30rpx;
		.title{
			font-size: 38rpx;
			font-weight: 600;
			line-height: 80rpx;
		}
		.titleName{
			font-size: 28rpx;
			font-weight: 600;
		}
		.text-desc {
			display: flex;
			justify-content: space-between;
			flex-direction: column;
			line-height: 60rpx;
			position: relative;
			padding: 40rpx 0;
			&::after{
				position: absolute;
				box-sizing: border-box;
				content: ' ';
				pointer-events: none;
				right: 0;
				bottom: 0;
				left: 0;
				border-bottom: 1px solid #ebedf0;
				-webkit-transform: scaleY(.5);
				transform: scaleY(.5);
			}
			color: #000;
			.titleName{
				font-size: 36rpx;
				flex: 1;
				// width: 150rpx;
				font-weight: 500;
			}
			.desc{
				font-size: 30rpx;
				line-height: 40rpx;
				text-align: left;
				flex: 1;
				
			}
			.picture{
				width: 80rpx;
				height: 80rpx;
				border-radius: 10rpx;
			}
		}
	}
</style>
